<template>
  <swipe :list="list" :autoplay="5000">
    <template #default="{ item }">
      <div class="home-advert-content">
        <div class="home-advert-text">
          <div class="home-advert-title van-ellipsis">{{ item.title }}</div>
          <div class="home-advert-sub-title van-ellipsis">{{ item.subTitle }}</div>
        </div>
        <van-image class="home-advert-image" width="64" height="64" :src="item.imgUrl" lazy-load />
      </div>
    </template>
  </swipe>
</template>

<script>
import Swipe from '@/components/Swipe'
export default {
  components: { Swipe },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-advert-content {
  width: 100%;
  height: 90px;
  background: @white;
  padding: 0 @padding-20;
  display: flex;
  align-items: center;
  .home-advert-text {
    flex: 1;
    overflow: hidden;
    padding-right: @padding-20;
    .home-advert-title {
      font-size: @font-size-18;
      font-weight: @font-weight-bold;
      padding-bottom: @padding-10;
    }
    .home-advert-sub-title {
      color: @gray-6;
      font-size: @font-size-13;
    }
  }
}
</style>
